<style lang="less">
  .filltitle {
    text-align: center;
    line-height: 28px;
    margin-bottom: 20px;
    dt {
      font-size: 16px;
    }
    dd {
      font-size: 12px;
      color: #888;
    }
  }

  .billinfo-wrap {
    margin: 0.3rem;
    padding: 0.3rem;
    background-color: #fff;
    border-radius: 10px;
    line-height: 18px;
    font-size: 14px;
    li {
      padding: 0 0 8px;
    }
    span.title {
      width: 1.5rem;
      display: inline-block;
    }
    span.info {
      color: #757575;
    }
    .spliter {
      height: 0px;
      margin: 8px 0 16px 0;
      border-bottom: 1px dashed #ccc;
    }
  }

  .w100 {
    width: 100%;
  }

  .org {
    color: #ff7202 !important;
  }
  .txt-c {
    margin:10px 0;
    text-align:center;
  }
  .img-c img{
    margin:0 auto;
  }
  .bold {
    font-weight:600;
  }
  .closeWin {
    color:#ffffff;
    position: absolute;
    bottom:-40px;
    width:50px;
    left: calc(~"(100vw - 50px) / 2")
  }
  .c27c24c {
    color:#27c24c !important;
  }
</style>

<template>
  <div class="contain">
    <div class="filltitle" style="margin-top:0.3rem">
      <dl>
        <dt class="ft20">订单详情</dt>
        <!--<dd>{{todolist.wXPaySerrial}}</dd>-->
      </dl>
    </div>

    <ul class="billinfo-wrap">
      <!--<li class="txt-c ft20">我的签到码</li>-->
      <li class="txt-c ft14">我的签到码</li>
      <li class="txt-c" style="position:relative">
        <div style="position:absolute; width:100%; height:100%"></div>
        <qrcode class="img-c" :value="scanUrl" :size="160"></qrcode>
      </li>
      <li class="txt-c ft14">成功签到满<i style="color:#FF0000; font-weight:600">7</i>次即可获赠礼品</li>
      <li class="txt-c ft17">已签到<i style="color:#FF0000; font-weight:600">{{attList.length}}</i>次
        <!--<span v-if="!showBtn">即可填写领奖信息（签到后请刷新页面)，已填写收货地址</span><span v-if="attList.length > 0" @click="attDetail">[查看详情]</span>-->
      </li>
      <!--<li v-if="attList.length>0 && showBtn">
        <div class="agbtn btn-info ft17" style="display:block; height:45px; line-height:45px;" @click="showPop">填写领奖信息</div>
      </li>-->
      <div class="spliter"></div>
      <li>
        <span class="title">课程</span>
        <span class="info">{{todolist.className}}</span>
      </li>
      <li>
        <span class="title">学期</span>
        <span class="info">{{todolist.timeCate}}每天{{todolist.time}}</span>
      </li>
      <li>
        <span class="title">校区</span>
        <span class="info">{{todolist.schoolName}}：{{todolist.classRoomName}}</span>
      </li>
      <li class="cf">
        <span class="title">校区地址</span>
        <span class="info" @click="gotoNav(todolist.schoolAddress)" style="display: block;float:  right; width: calc(100% - 1.5rem);">{{todolist.schoolAddress}} <i class="iconfont icon-gps c27c24c ft14"></i></span>
      </li>
      <li>
        <span class="title">校区电话</span>
        <span class="info">
          <a style="padding-right:10px;" v-for="item in JSON.parse(todolist.schoolTel)" :href="'tel:' + item"><i class="iconfont icon-phone c27c24c ft14"></i> {{item}}</a>
        </span>
      </li>
      <li>
        <span class="title">学员姓名</span>
        <span class="info">{{todolist.name}}</span>
      </li>
      <li>
        <span class="title">联系方式</span>
        <span class="info">{{todolist.contactTel}}</span>
      </li>
      <!--<li>
        <span class="title">课室</span>
        <span class="info org">{{todolist.classRoomName}}</span>
      </li>
      <li>
        <span class="title">在读学校</span>
        <span class="info">{{todolist.inSchool}}</span>
      </li>
      <li>
        <span class="title">年级</span>
        <span class="info">{{todolist.inGrade | StdGrade}}</span>
      </li>
      <li>
        <span class="title">区域</span>
        <span class="info">{{todolist.district}}</span>
      </li>-->
      <li v-if="todolist.orderSign == null">
        <span class="title">支付费用</span>
        <span class="info">￥{{(todolist.payAmount*1).toFixed(2)}}</span>
      </li>
      <div class="spliter"></div>
      <li>
        <span class="info">此课程内容为免费赠送，共计7天。
        <br>显示<i class="iconfont icon-gps c27c24c ft14"></i>的可开启导航，<i class="iconfont icon-phone c27c24c ft14"></i>可直接拨打电话</span>
      </li>
    </ul>

    <x-dialog v-model="showPopup" :hide-on-blur="true" :dialog-style="{'max-width': '96%', width: '96%', 'background-color': '#f5f5f5', 'overflow':'visible'}">
      <ul class="login-wrap" style="padding:0.3rem;">
        <li class="displayflex">
            <span class="iconfont icon-account"></span>
            <div class="flex1 login-ipt"><input type="text" placeholder="联系人" v-model.trim="name"></div>
            <span class="iconfont icon-del" v-if="name" @click="name=''"></span>
        </li>
        <li class="displayflex">
            <span class="iconfont icon-mobilephone"></span>
            <div class="flex1 login-ipt"><input type="tel" placeholder="手机号" v-model.trim="mobileNo"></div>
            <span class="iconfont icon-del" v-if="mobileNo" @click="mobileNo=''"></span>
        </li>
        <li class="displayflex">
            <span class="iconfont icon-mobilephone"></span>
            <div class="flex1 login-ipt"><input type="text" placeholder="递送地址" v-model.trim="address"></div>
            <span class="iconfont icon-del" v-if="address" @click="address=''"></span>
        </li>
        <div class="agbtn btn-info ft17" style="display:block; height:45px; line-height:45px;" @click="submit">
            确认领取
        </div>
      </ul>
      <div class="closeWin"><i class="iconfont icon-close ft24 bold" @click="closePop"></i></div>
    </x-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        todolist: {},
        scanUrl:'',
        attList:[],
        showPopup:false,
        name:'',
        mobileNo:'',
        address:'',
        showBtn: false,
        GeoCoder:null,
      }
    },
    created() {
      if (localStorage.orderDetail != '') {
        this.todolist = JSON.parse(localStorage.orderDetail);
        console.log(this.todolist);
        this.scanUrl = 'http://' + window.location.host + '/#/Attendance?id=' + this.todolist.guid;
        this.getAttendanceList();
        // this.checkSubmited();
        this.initMap();
      }
      else {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "订单信息不存在或发生错误",
          onHide() {
            window.location.href = 'http://wx.yilaibaobei.com/wx.html';
          }
        });
      }
    },
    methods:{
      getAttendanceList(){
        let self = this,
            query = {
              orderId: this.todolist.guid
            }
        self.showLoad = true;
        this.Ajax.post("getAttendance", query).then(function (resp) {
          self.showLoad = false;
          if(resp.IsSuccess) {
            self.attList = resp.Datas;
          } else {
            self.$vux.toast.show({
              type: "warn", //success, warn, cancel, text
              text: resp.ErrorMessage,
            });
          }
        })
      },
      attDetail() {

      },
      showPop(){
        this.showPopup = true;
      },
      closePop(){
        this.showPopup = false;
      },
      submit(){
        let self= this,
            reg = /^1[345789]\d{9}$/;

        if (this.name == "") {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "请填写姓名"
          });
          return false;
        }

        if (this.mobileNo == "" || !this.mobileNo) {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "请填写手机号"
          });
          return false;
        } else if (!reg.test(this.mobileNo)) {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "请填写正确手机号"
          });
          return false;
        }

        if (this.address == "") {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "请填写详细地址"
          });
          return false;
        }

        let query = {
              name: this.name,
              mobileNo: this.mobileNo,
              address: this.address,
              openId: this.todolist.wxOpenID,
            };
        this.showLoad = true;
        this.Ajax.post("createGiftAddress", query).then(function (resp) {
          self.showLoad = false;
          if(resp.IsSuccess) {
            self.showPopup = false;
            self.$vux.toast.show({
              type: "success", //success, warn, cancel, text
              text: "提交完成，请保持联系方式畅通，我们的奖品将在7个工作日内进行派送，敬请查收",
              time: 5000,
              onHide(){
                location.reload();
              }
            });
          } else {
            self.showPopup = false;
            self.$vux.toast.show({
              type: "warn", //success, warn, cancel, text
              text: resp.ErrorMessage,
            });
          }
        })
      },
      checkSubmited(){
        let self = this,
            query = {
              openId: this.todolist.wxOpenID,
            }
        this.showLoad = true;
        this.Ajax.post("getGiftAddress", query).then(function (resp) {
          self.showLoad = false;
          if(resp.IsSuccess) {
            if(resp.Data == null) {
                self.showBtn = true;
            }
          }
        })
      },
      initMap(){
        let self = this;
        this.GeoCoder = new qq.maps.Geocoder({
        complete : function(result){
            return new Promise(function (resolve, reject) {
              resolve(self.OpenMap(result));
            });
          }
        });
      },
      gotoNav(address){
        this.GeoCoder.getLocation(address);
      },
      OpenMap(GeoData){
        this.jWeixin.openLocation({
          latitude: GeoData.detail.location.lat, // 纬度，浮点数，范围为90 ~ -90
          longitude: GeoData.detail.location.lng, // 经度，浮点数，范围为180 ~ -180。
          name: '', // 位置名
          address: GeoData.detail.address, // 地址详情说明
          scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
          infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        });
      }
    }
  }
</script>
